<template>
  <div class="videoplay">
    <div class="player-container">
      <d-player v-if="isVideo" ref="player" :options="options"></d-player>
    </div>
  </div>
</template>

<script>
export default {
  name: "play",
  components: {},
  props: {
    title: {
      type: String
    },
    cover: {
      type: String
    },
    url: {
      type: String
    }
  },
  data() {
    return {
      isVideo: true,
      srcc: this.url,
      coverr: this.cover,
      options: {
        autoplay: true, // 视频自动播放
        container: document.getElementById("dplayer"), //播放器容器
        mutex: false, //  防止同时播放多个用户，在该用户开始播放时暂停其他用户
        theme: "#b7daff", // 风格颜色，例如播放条，音量条的颜色
        loop: false, // 是否自动循环
        lang: "zh-cn", // 语言，'en', 'zh-cn', 'zh-tw'
        screenshot: true, // 是否允许截图（按钮），点击可以自动将截图下载到本地
        hotkey: true, // 是否支持热键，调节音量，播放，暂停等
        preload: "auto", // 自动预加载
        volume: 0.7, // 初始化音量
        playbackSpeed: [0.5, 0.75, 1, 1.25, 1.5, 2, 3], //可选的播放速度，可自定义
        // logo:
        //   "https://qczh-1252727916.cos.ap-nanjing.myqcloud.com/pic/273658f508d04d488414fd2b84c9f923.png", // 在视频左角上打一个logo
        video: {
          url: this.url, // 播放视频的路径
          // quality: [
          //   // 设置多个质量的视频
          //   {
          //     name: "高清",
          //     url: "https://media.w3.org/2010/05/sintel/trailer.mp4",
          //     type: "auto" // 'auto', 'hls', 'flv', 'dash', 'webtorrent', 'normal' 或 其他自定义类型
          //   },
          //   {
          //     name: "标清",
          //     url:
          //       "https://api.dogecloud.com/player/get.mp4?vcode=5ac682e6f8231991&userId=17&ext=.mp4",
          //     type: "auto"
          //   }
          // ],
          defaultQuality: 0, // 默认是高清
          pic: this.cover, // 视频封面图片
          thumbnails: "" // 进度条上的缩略图,需要通过dplayer-thumbnails来生成
        },
        // subtitle: {   //字幕
        //   url: "",   //字幕网址
        //   color:'#fff' 字幕颜色
        //   fontSize: "20px",
        //   bottom: "40px",
        // },
        // danmaku: {
        //   // 弹幕
        //   id: "9E2E3368B56CDBB4",
        //   api: "https://api.prprpr.me/dplayer/",
        //   token: "tokendemo", //后端验证令牌
        //   maximum: 1000, //弹幕最大数量
        //   addition: ["https://api.prprpr.me/dplayer/v3/bilibili?aid=4157142"], //其他弹幕
        //   user: "DIYgod", //弹幕用户名
        //   bottom: "15%", //值，例如：10px，10％，即弹幕底部和播放器底部之间的距离，以防止遮挡字幕
        //   unlimited: true //即使弹幕重叠也显示所有弹幕
        // },
        contextmenu: [
          //  自定义上下文菜单
          // 右键菜单
          {
            text: "custom1",
            link: "https://www.bilibili.com"
          },
          {
            text: "custom2",
            click: () => {
              // console.log(player);
            }
          }
        ],
        highlight: [
          //进度条上的自定义时间标记
          // 进度条时间点高亮
          {
            text: "10M",
            time: 6
          },
          {
            text: "20M",
            time: 12
          }
        ]
      }
    };
  },
  computed: {
    themeColor() {
      return this.$store.state.themeColor;
    }
    // aaa() {
    //   return this.url;
    // }
  },
  watch: {
    url(val) {
      this.options.video.url = val;
      this.options.video.pic = this.cover;
      this.isVideo = false;
      this.$nextTick(() => {
        this.isVideo = true;
      });
      // return (this.srcc = val);
    },
    title: function() {
      this.isVideo = false;
      this.$nextTick(() => {
        this.isVideo = true;
      });
      this.srcc = this.url;
    },
    cover: function(val) {
      this.isVideo = false;
      this.$nextTick(() => {
        this.isVideo = true;
      });
      // this.srcc = this.url;
      this.options.video.url = this.url;
      this.options.video.pic = val;
      // this.coverr = val;
    }
  },
  created() {
    // this._setVideoUrl(this.url);
  },
  mounted() {
    // this.isVideo = true;
    // document.querySelector(".dplayer-menu").style.display = "none";
    // document.querySelector("#dplayer").oncontextmenu = () => {
    //   document.querySelector(".dplayer-menu").style.display = "none";
    //   document.querySelector(".dplayer-mask").style.display = "none";
    //   document.querySelector(".dplayer-menu-show").style.display = "none";
    //   return false;
    // };
  },
  methods: {
    // _setVideoUrl(url) {
    //   this.player.switchVideo({
    //     url: url
    //   });
    // }
  },
  destroyed() {}
};
</script>

<style scoped lang="scss">
.player-container {
  // width: 800px;
  width: 960px;
  height: 470px;
  margin: 10px 0;
  .dplayer {
    width: 100%;
    height: 100%;
  }
  /deep/.dplayer-menu {
    display: none;
  }
}
</style>
